import React,{ Component } from 'react'
import { List,Button,Card,Badge,Modal } from 'antd'
import { connect } from 'react-redux'
import {
	delMsg,
	setRead,
	allRead
} from "../../store/message/actionCreators"
class Message extends Component{
	constructor(){
		super();
		this.state = {
			visible:false,
			index:-1
		}
	}
	render(){
		return (
			<Card title="消息中心" extra={ 
				<Button 
					type="primary"
					onClick={ this.allRead }
				>全部已读</Button> 
			}>
			<Modal
			  title="删除消息"
			    visible={this.state.visible}
			    onOk={this.delConfirm}
			    onCancel={this.handleCancel}
			  >
			    <p>Some contents...</p>
			    <p>Some contents...</p>
			    <p>Some contents...</p>
			</Modal>
				<List
				    itemLayout="horizontal"
				    dataSource={this.props.msgLists}
				    renderItem={(item,index) => (
				      <List.Item extra={ 
								<>
									<Button 
										size="small" 
										disabled={ item.read }
										onClick={ ()=>{this.setRead(index) } }
										>点击已读</Button> 
									<Button type="danger" 
										onClick={ ()=>{
											this.setState({
												visible:true,
												index
											})
										} }
									size="small">删除</Button>
								</>
								}>
				        <List.Item.Meta
				          title={item.title}
				          description={
										<Badge dot={!item.read}>
												{ item.content }
										</Badge>
									}
				        />
				      </List.Item>
				    )}
				  />
			</Card>
		)
	}
	setRead = (index)=>{
		// 设置已读
		this.props.setRead(index);
	}
	allRead = ()=>{
		// 全部已读
		this.props.allRead();
	}
	delConfirm=()=>{
		// 确认删除
			// alert(this.state.index)
			this.props.delMsg(this.state.index);
			this.setState({
				visible:false
			})
	}
	handleCancel=()=>{
		// 取消删除
		this.setState({
			visible:false
		})
	}
}

const mapStateToProps = (state)=>{
	return {
		msgLists:state.msgReducer.msgLists
	}
}
const mapDispatchToProps = (dispatch)=>{
	return {
		delMsg:(index)=>{
			dispatch(delMsg(index))
		},
		setRead:(index)=>{
			dispatch(setRead(index))
		},
		allRead:()=>{
			dispatch(allRead())
		}
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(Message)